<template>
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in product.thumbs_text" :key="image">
      <van-image width="100%" height="500" fit="cover" :src="image" />
    </van-swipe-item>
  </van-swipe>

  <div class="detailbox">
    <div class="box">
      <div class="left">
        <span v-if="product.live_price">￥{{ product.live_price }}</span>
        <span :class="product.live_price ? 'product_price' : ''"
          >￥{{ product.price }}</span
        >
      </div>
      <div class="right">
        <div class="sales">{{ product.buy_count }} 人付款</div>
        <div class="region">{{ product.region_text }}</div>
      </div>
    </div>

    <h4>{{ product.name }}</h4>
  </div>

  <div class="allkbox"></div>

  <!-- 商品规格 -->
  <div class="info_choice">
    <!-- Sku 商品规格 -->
    <div class="commodity" @click="SkuShow = true">
      <div class="opt">
        <div class="title wanl-gray">选择</div>
        <div class="option">
          <div class="selected">
            <div v-if="Object.getOwnPropertyNames(SelectedProp).length === 0">
              <span>选择</span>
              <span v-for="(val, index) in props" :key="index">{{ val }}</span>
            </div>

            <div v-else>
              <span>已选择</span>
              <span
                v-for="(val, index) in Object.values(SelectedProp)"
                :key="index"
                >{{ val }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="wanl-gray">
        <img src="/assets/images/go.png" />
      </div>
    </div>
    <!-- 服务 -->
    <div class="commodity" @click="TipShow = true">
      <div class="opt">
        <div class="title wanl-gray">服务</div>
        <div class="option">
          <div class="selected">
            <div>
              <span>7天无理由退款</span>
              <span>·</span>
              <span>24小时内发货</span>
              <span>·</span>
              <span>假一赔十</span>
            </div>
          </div>
        </div>
      </div>
      <div class="wanl-gray">
        <img src="/assets/images/go.png" />
      </div>
    </div>
  </div>

  <div class="allkbox"></div>

  <!-- 评论 -->
  <div class="comment" @click="ToCommentList">
    <div class="header">
      <div class="title">宝贝评价（{{ CommentCount }}）</div>
      <div class="rate">
        <div class="rate-text">好评率高达{{ ApplauseRate }}%</div>
        <div class="wanl-gray">
          <img src="/assets/images/go.png" />
        </div>
      </div>
    </div>
    <div class="comment-list">
      <div class="item" v-for="item in CommentList" :key="item.id">
        <div class="user">
          <div class="avatar">
            <img :src="item.business.avatar_cdn" alt="" />
          </div>
          <div class="nickname">
            {{ item.business.nickname }}
          </div>
          <div class="rate">
            <van-rate
              v-model="item.rate"
              :size="14"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
              readonly
            />
          </div>
        </div>
        <div class="content">
          {{ item.comment }}
        </div>
      </div>
    </div>
  </div>

  <div class="allkbox"></div>

  <div class="product-info">
    <div class="title-box">
      <div class="line"></div>
      <div class="title">产品详情</div>
    </div>

    <div class="content" v-html="product.content"></div>
  </div>

  <!-- 协议条款 -->
  <van-action-sheet v-model:show="TipShow" title="协议条款">
    <div class="ProductTip">
      一、我们如何使用信息 <br />
      二、我们如何共享信息<br />
      三、我们如何转让信息<br />
      四、我们如何公开披露信息<br />
      五、一般储存期限<br />
      六、我们如何确保您的信息安全<br />
      七、您能做什么<br />
      八、我们如何处理未成年人的个人信息<br />
      九、您的个人信息的存储地点<br />
      十、本隐私权政策不适用的范围<br />
      十一、本隐私权政策如何更新<br />
      十二、联系我们<br />
    </div>
  </van-action-sheet>

  <!-- SKU -->
  <van-sku
    ref="SkuRef"
    v-model="SkuShow"
    :sku="sku"
    :properties="properties"
    :goods="goods"
    :goods-id="product.id"
    @add-cart="OnAddCart"
    @buy-clicked="OnBuy"
    @sku-prop-selected="OnSelectedProp"
  >
    <template #sku-actions="props">
      <div class="van-sku-actions">
        <van-button
          square
          size="large"
          type="warning"
          @click="props.skuEventBus.emit('sku:addCart')"
          >加入购物车</van-button
        >

        <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
        <van-button
          square
          size="large"
          type="danger"
          @click="props.skuEventBus.emit('sku:buy')"
          >立即购买</van-button
        >
      </div>
    </template>
  </van-sku>

  <div style="height: 50px"></div>

  <!-- 底部导航栏 -->
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" />
    <van-action-bar-icon
      icon="cart-o"
      text="购物车"
      :badge="product.cart_count"
      @click="ToCart"
    />
    <van-action-bar-icon
      icon="star"
      text="已收藏"
      color="#ff5000"
      @click="OnCollection"
      v-if="product.collection_status === true"
    />
    <van-action-bar-icon
      icon="star-o"
      text="收藏"
      @click="OnCollection"
      v-else
    />
    <van-action-bar-button
      type="danger"
      text="立即购买"
      @click="SkuShow = true"
    />
  </van-action-bar>
</template>

<script setup>
// 引入sku商品规格插件和样式
import VanSku from "vant-sku";
import "vant-sku/dist/index.css";
// this代理
const { proxy } = getCurrentInstance();
// 当前登录用户信息
const business =
  Object.getOwnPropertyNames(proxy.$business.value).length > 0
    ? proxy.$business
    : ref({});
// 获取商品id
const proid = ref(proxy.$route.query.proid ?? 0);
// 商品数据
const product = ref({});
// 条款服务
const TipShow = ref(false);
// 显示商品规格弹出层
const SkuShow = ref(false);
// 商品规格数据
const sku = ref({});
// 商品属性数据
const properties = ref([]);
// sku里的商品信息
const goods = ref({});
const SkuRef = ref({});
// 该商品的规格名称
const props = ref(["商品规格"]);
// 选中的属性
const SelectedProp = ref({});
// 评价数据
const CommentList = ref([]);
// 好评率
const ApplauseRate = ref(0);
// 评价总数
const CommentCount = ref(0);
// 挂载前钩子
onBeforeMount(() => GetProductInfo());
// 获取商品信息
const GetProductInfo = async () => {
  // 组装参数
  let params = {
    proid: proid.value,
  };
  // 用户信息
  if (business.value.hasOwnProperty("id")) {
    params.busid = business.value.id;
  }
  // 发起请求
  let result = await proxy.$http.post({
    url: "/product/info",
    params,
  });
  // 处理请求结果
  if (result.code === 1) {
    // 商品信息
    product.value = result.data.product;
    // sku 数据
    sku.value = result.data.sku;
    // properties 数据
    // Object.values(object)它用于提取对象的值并返回一个数组
    properties.value = Object.values(result.data.properties);
    // 默认商品 sku 缩略图
    goods.value = { picture: product.value.thumb_text };
    // 商品属性名，如果有则显示，没有则只显示数量
    props.value = result.data.props.length > 0 ? result.data.props : ["数量"];
    // 评论总数
    CommentCount.value = result.data.CommentCount;
    // 好评率
    ApplauseRate.value = result.data.ApplauseRate;
    // 评论数据
    CommentList.value = result.data.CommentData;
    CommentList.value.map((item) => {
      // 将所有数据里面的评星都转成Int类型
      item.rate = parseInt(item.rate);
    });
  }
};

// 加入购物车
const OnAddCart = async (SkuData) => {
  // 判断是否登录
  if (business.value.hasOwnProperty("id") === false) {
    proxy
      .$confirm({
        title: "请先登录",
        message: "是否跳转到登录页",
      })
      .then(() => {
        // 存储当前页面的路由地址，方便登录后返回这里
        proxy.$cookies.set("redirect", true);
        // 跳转到登录页
        proxy.$router.push("/business/login");
      })
      .catch(() => {});
    return;
  }
  // 判断如果有商品规格，但是用户没选择，提示选择商品规格
  if (properties.value.length > 0 && !SkuData.selectedSkuComb) {
    proxy.$fail("请选择商品规格");
    return;
  }
  // 存放用户选择的商品规格
  const relation = [];
  if (properties.value.length > 0 && SkuData.selectedSkuComb) {
    for (const item of SkuData.selectedSkuComb.properties) {
      if (item.v[0].id) {
        relation.push(item.v[0].id);
      }
    }
  }
  // 组装参数
  const params = {
    busid: business.value.id,
    proid: proid.value,
    relation: relation,
    nums: SkuData.selectedNum,
  };
  // 发起请求
  const result = await proxy.$http.post({
    url: "/cart/add",
    params,
  });
  // 处理请求结果
  if (result.code === 1) {
    SkuShow.value = false;
    product.value.cart_count = result.data;
    proxy
      .$confirm({
        title: "加入购物车成功",
        message: "是否跳转购物车进行结算？",
      })
      .then(() => {
        proxy.$router.push({
          path: "/cart",
          query: { action: "info" }, // 从购物车返回到商品详情
        });
      })
      .catch(() => {});
  } else {
    proxy.$fail(result.msg);
  }
};

// 立即购买
const OnBuy = (SkuData) => {
  // 判断是否登录
  if (business.value.hasOwnProperty("id") === false) {
    proxy
      .$confirm({
        title: "请先登录",
        message: "是否跳转到登录页",
      })
      .then(() => {
        // 存储当前页面的路由地址，方便登录后返回这里
        proxy.$cookies.set("redirect", true);
        // 跳转到登录页
        proxy.$router.push("/business/login");
      })
      .catch(() => {});
    return;
  }
  // 判断如果有商品规格，但是用户没选择，提示选择商品规格
  if (properties.value.length > 0 && !SkuData.selectedSkuComb) {
    proxy.$fail("请选择商品规格");
    return;
  }
  // 选择的属性
  let relations = [];
  // 如果是直播商品就按直播价格购买，否则商品原价
  let price = product.value.live_price
    ? product.value.live_price
    : product.value.price;
  // 转浮点数
  let total = parseFloat(price);
  // 判断商品是否属于直播商品
  let type = product.value.live_price ? "live" : "product";
  // 有规格
  if (properties.value.length > 0) {
    // 选中的属性
    let SkuProps = SkuData.selectedSkuComb.properties;
    SkuProps.forEach((item) => {
      // 获取规格
      let prop = item.v[0] ? item.v[0] : {};
      if (prop.id) {
        // 每个规格的加价
        let PropPrice = (prop.price / 100).toFixed(2);
        // 计算出所有选中的规格加价后的商品价格
        total += parseFloat(PropPrice);
        relations.push({
          title: item.k ? item.k : "",
          value: prop.name,
          price: PropPrice,
        });
      }
    });
  }
  // 组装参数
  const data = [
    {
      proid: proid.value,
      nums: SkuData.selectedNum,
      product: product.value,
      total: (total * SkuData.selectedNum).toFixed(2),
      price: total.toFixed(2),
      attrs: relations,
      type,
    },
  ];
  // 把组装好的数据存入本地存储里
  proxy.$cart.value = data;
  proxy.$router.push("/cart/confirm");
};

// 显示已选择商品属性
const OnSelectedProp = ({ propValue }) => {
  // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
  // 值：skuValueId（规格值 id）
  SelectedProp.value[propValue.skuKeyStr] = propValue.name;
};

// 去购物车页面
const ToCart = () => {
  proxy.$router.push({
    path: "/cart",
    query: { action: "info" }, // 从购物车返回到商品详情
  });
};

// 收藏
const OnCollection = async () => {
  // 判断是否登录
  if (business.value.hasOwnProperty("id") === false) {
    proxy
      .$confirm({
        title: "请先登录",
        message: "是否跳转到登录页",
      })
      .then(() => {
        // 存储当前页面的路由地址，方便登录后返回这里
        proxy.$cookies.set("redirect", true);
        // 跳转到登录页
        proxy.$router.push("/business/login");
      })
      .catch(() => {});
    return false;
  }
  // 组装参数
  const params = {
    proid: proid.value,
    busid: business.value.id,
  };
  // 发起请求
  const result = await proxy.$http.post({
    url: "/product/collection",
    params,
  });
  // 处理请求结果
  if (result.code === 1) {
    // 收藏状态
    product.value.collection_status = result.data.action;
  } else {
    proxy.$fail(result.msg);
  }
};

// 跳转评论列表
const ToCommentList = () => {};
</script>

<style scoped>
@import url("/assets/css/ProductInfo.css");
</style>